<template>
	<view>
		<view class="wrap">
			<image src="https://tb.wuyouzhuan888.com/applet-icon/bg.png" class="bg-set" mode=""></image>
		</view>

		<view class="goodItem">
			<view class="toolItem" v-for="item of list" @click="toInfo(item.id)">
				<image class="itemImg" mode="aspectFill" :src="item.images"></image>
				<view class="info">
					<view class="text">
						<view class="title">{{item.title}}</view>
						<view class="desc">{{item.tip}}</view>
					</view>
					<image class="btn" mode="aspectFill"
						src="https://tb.wuyouzhuan888.com/applet-icon/8174f37f1c84e7e7566e5859aa82a885.png"></image>
				</view>
			</view>
		</view>

		<!-- 加载中提示 -->
		<u-loadmore v-if="!isEmpty" :status="status" color="#fff" icon-color="#fff" font-size="30" margin-top="10"
			margin-bottom="10" />
		<view v-if="isEmpty" class="empty">
			<u-empty color="#A897D9" text="暂无数据" src="https://tb.wuyouzhuan888.com/appleticon/noDate.png"></u-empty>
		</view>
		<view @click="toTop" v-if="scrollTop>60">
			<xuanfu></xuanfu>
		</view>
	</view>
</template>
<script>
	import xuanfu from '@/components/xuanfu.vue'

	export default {
		components: {
			xuanfu
		},
		data() {
			return {
				scrollTop: 0,
				list: [],
				total: 0,
				// 页数
				page: 1,
				// 每页条数
				size: 10,
				// 加载状态
				status: 'loadmore',
				// 数据为空
				isEmpty: false,
				assessId: 0,
				creatorId: 0,
				accountId: 0,
				taskId: 0,
				movId: 0,
				collectionId: 0,
				urlId: 0,
				callbackId: 0,
			};
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onLoad(options) {
			uni.showLoading({
				title: '加载中...'
			})
			// 获取测评列表
			this.getList();
			this.assessId = options.assessId ?? 0;
			this.creatorId = options.creatorId ?? 0;
			this.accountId = options.accountId ?? 0;
			this.taskId = options.taskId ?? 0;
			this.movId = options.movId ?? 0;
			this.collectionId = options.collectionId ?? 0;
			this.urlId = options.urlId ?? 0;
			this.callbackId = options.callbackId ?? 0;
		},
		onReady() {
			uni.hideLoading()
			if (this.assessId > 0) {
				uni.navigateTo({
					url: "/pages/sys/assess_bags/info?assessId=" + this.assessId +
						"&creatorId=" + this.creatorId +
						"&accountId=" + this.accountId +
						"&taskId=" + this.taskId +
						"&movId=" + this.movId +
						"&callbackId=" + this.callbackId +
						"&collectionId=" + this.collectionId +
						"&urlId=" + this.urlId
				})
			}
		},
		// 触底加载
		onReachBottom() {
			let allTotal = this.page * this.size;

			if (allTotal < this.total) {
				//当前条数小于总条数 则增加请求页数
				this.page++;
				this.getList();
			} else {
				//加载完状态
				this.status = "noMore";
			}
		},
		methods: {
			toTop() {
				if (this.scrollTop > 60) {
					uni.pageScrollTo({
						scrollTop: 0
					})
				}
			},
			// 获取测评列表
			getList() {
				this.$u.api.assess.getList({
					page: this.page,
					rows: this.size
				}).then(res => {
					if (res.code != 200) {
						this.$u.toast(res.msg);
						return;
					}

					this.total = res.data.total;

					if (this.page > 1) {
						this.list.push(...res.data.list);
					} else {
						this.list = res.data.list
					}

					// 数据为空
					if (this.list.length == 0) {
						this.isEmpty = true
					}

					if (this.size > res.data.list.length) {
						//加载完状态
						this.status = "noMore";
					}
				})
			},
			// 点击测评
			toInfo(assessId) {
				uni.navigateTo({
					url: "/pages/sys/assess_bags/info?assessId=" + assessId
				})
			},
		}
	};
</script>
<style scoped lang="scss">
	.wrap {
		margin: 0 32rpx;
	}

	.goodItem {
		width: 96%;
		margin: 0 auto;
	}

	.toolItem {
		display: flex;
		margin: 20rpx 0;
		position: relative;
		height: 180rpx;
		padding: 30rpx;
		width: 100%
	}

	.toolItem:nth-child(2n-1) {
		background-image: url(https://tb.wuyouzhuan888.com/applet-icon/bafbb66afd8e214ab92f734034bd996a.png);
		background-position: 0 0;
		background-repeat: no-repeat;
		background-size: 100% 100%
	}

	.toolItem:nth-child(2n) {
		background-image: url(https://tb.wuyouzhuan888.com/applet-icon/f11cf1a72f4c391dd225d6d8306e0c5c.png);
		background-position: 0 0;
		background-repeat: no-repeat;
		background-size: 100% 100%
	}

	.toolItem .itemImg {
		border-radius: 20rpx;
		flex-shrink: 0;
		height: 120rpx;
		width: 120rpx
	}

	.toolItem .info {
		display: flex;
		flex-shrink: 0;
		height: 120rpx;
		padding-left: 26rpx;
		width: 536rpx
	}

	.toolItem .text {
		height: 100%;
		width: 70%;
		overflow: hidden;
	}

	.toolItem .title {
		color: #fff;
		font-size: 32rpx;
		font-weight: 700;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}


	.toolItem .desc {
		color: #ccc;
		font-size: 24rpx;
		margin-top: 40rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.toolItem .btn {
		display: flex;
		margin-top: 30rpx;
		flex-shrink: 0;
		height: 60rpx;
		width: 160rpx
	}
</style>